import React from "react";
import Select from 'antd/lib/select';
import Col from 'antd/lib/col';
import Row from 'antd/lib/row';
import Input from 'antd/lib/input';
import Collapse from 'antd/lib/collapse';
import notification from "@/services/notification";
import 'antd/dist/antd.less'
import moment from "moment";
import DatePicker from "antd/lib/date-picker";
import locale from 'antd/es/date-picker/locale/zh_CN';
import { currentUser } from "@/services/auth";
import Enums from "@/services/enums";
import GlobalFunctions from '@/store/globalFunctions';
import { inject, observer } from 'mobx-react';

const { TextArea } = Input;
const { Panel } = Collapse;

class PaymentTable extends React.Component {
  state = {
    periodunitdata: [{ id: "年", name: "年" }, { id: "半年", name: "半年" }, { id: "月", name: "月" }],
    projectdata: [],
  };
  componentWillMount() {
    this.setState({
      projectdata: this.props.projectdata,
    });
  }


  bill_dateonchange = (value) => {
    if (GlobalFunctions.isEmptyobj(value)) {
      return;
    }
    this.props.paymentStore.paymentModel.setBill_date(value);
    if (!this.props.paymentStore.paymentModel.isnew) {
      return;
    }
    this.props.paymentStore.getcode("payment",value,0,"code");
  };

  employeechange = value => {
    let item = this.props.paymentStore.paymentModel.employeedata.filter((p) => {
      return p.id === value;
    });
    this.props.paymentStore.paymentModel.setinitdetaildata(item,this.props.paymentStore.paymentModel.paytype);

  }
  // 这种方式十分适合父子组件的互动，通常是父组件需要通过某些状态控制子组件渲染亦或销毁...
  customerchange = value => {
    let items = this.props.projectdata.filter((p) => {
      return p.customerid === value;
    });
    this.props.paymentStore.paymentModel.setCustomerid(value);
    this.setState({
      projectdata: items,
    });
  }
  projectchange = value => {
    let item = this.state.projectdata.filter((p) => {
      return p.id === value;
    });
    this.props.paymentStore.paymentModel.setinitdetaildata(item,this.props.paymentStore.paymentModel.paytype);
  }
  fieldedit(field) {
    if (!this.props.paymentStore.paymentModel.isedit) {
      return true;
    }
    if (this.props.paymentStore.paymentModel.colcontrol) {
      if (this.props.paymentStore.paymentModel.allow_col.indexOf(field) >= 0) {
        return false;
      } else {
        return true;
      }
    } else {
      return false;
    }
  }
  render() {
    return (
      <div>
        <Collapse defaultActiveKey={['1', '2', '3']} >
          <Panel header="基本情况" key="1">
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                <span style={{ color: '#f81d22', fontSize: 12 }}>*</span>日期:</div></Col>
              <Col span={6}>
                <DatePicker
                  locale={locale}
                  style={{ width: "100%" }}
                  value={this.props.paymentStore.paymentModel.bill_date}
                  onChange={this.bill_dateonchange}
                  placeholder="日期"
                  disabled={this.fieldedit("bill_date")}
                  autoFocus
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                状态:</div></Col>
              <Col span={6}>
                <Input
                  value={this.props.paymentStore.paymentModel.status === 0 ? "草稿" : (this.props.paymentStore.paymentModel.status === 1 ? "审核中" : "已审核")}
                  style={{ width: "100%" }}
                  placeholder="状态"
                  disabled="disabled"
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                录入人:</div></Col>
              <Col span={6}>
                <Select style={{ width: "100%" }}
                  showSearch
                  disabled={true}
                  optionFilterProp="children"
                  value={this.props.paymentStore.paymentModel.userid}
                  onChange={value => this.props.paymentStore.paymentModel.setUserid(value)} >
                  {(this.props.paymentuserdata || []).map(item => (
                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>
            </Row>
            <Row style={{ marginBottom: 5 }}>
              {this.props.paytype === 0 && (<Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                <span style={{ color: '#f81d22', fontSize: 12 }}>*</span>人员:</div></Col>)}
              {this.props.paytype === 0 && (<Col span={6}>
                <Select style={{ width: "100%" }}
                  showSearch
                  disabled={this.fieldedit("name")}
                  optionFilterProp="children"
                  value={this.props.paymentStore.paymentModel.employeeid}
                  onChange={this.employeechange} >
                  {(this.props.paymentStore.paymentModel.employeedata || []).map(item => (
                    <Select.Option key={item.employeeid} value={item.employeeid}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>)}
              {this.props.paytype === 1 && (<Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                <span style={{ color: '#f81d22', fontSize: 12 }}>*</span>客户:</div></Col>)}
              {this.props.paytype === 1 && (<Col span={6}>
                <Select style={{ width: "100%" }}
                  showSearch
                  disabled={this.fieldedit("customerid")}
                  optionFilterProp="children"
                  value={this.props.paymentStore.paymentModel.customerid}
                  onChange={this.customerchange} >
                  {(this.props.customerdata || []).map(item => (
                    <Select.Option key={item.id} value={item.id}>{item.strcustomername}</Select.Option>
                  ))}
                </Select>
              </Col>)}
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                <span style={{ color: '#f81d22', fontSize: 12 }}>*</span>编码:</div></Col>
              <Col span={6}>
                <Input
                  value={this.props.paymentStore.paymentModel.code}
                  style={{ width: "100%" }}
                  onChange={e => this.props.paymentStore.paymentModel.setCode(e.target.value )}
                  placeholder="编码"
                  disabled={this.fieldedit("code")}
                  autoFocus
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                <span style={{ color: '#f81d22', fontSize: 12 }}>*</span>名称:</div></Col>
              <Col span={6}>
                <Input
                  value={this.props.paymentStore.paymentModel.name}
                  style={{ width: "100%" }}
                  onChange={e => this.props.paymentStore.paymentModel.setName(e.target.value )}
                  disabled={this.fieldedit("name")}
                  placeholder="名称"
                />
              </Col>
            </Row>
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                <span style={{ color: '#f81d22', fontSize: 12 }}>*</span>部门:</div></Col>
              <Col span={6}>
                <Select style={{ width: "100%" }}
                  showSearch
                  optionFilterProp="children"
                  value={this.props.paymentStore.paymentModel.orgunitid}
                  onChange={value =>  this.props.paymentStore.paymentModel.setOrgunitid(value )}
                  disabled={this.fieldedit("orgunitid")}>
                  {(this.props.orgunitdata || []).map(item => (
                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
                  ))}
                </Select>
              </Col>

              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                {this.props.paytype === 1 ? "付款人":"收款人"}:</div></Col>
              <Col span={6}>
                <Input
                  value={this.props.paymentStore.paymentModel.payname}
                  style={{ width: "100%" }}
                  onChange={e => this.props.paymentStore.paymentModel.setPayname(e.target.value)}
                  disabled={this.fieldedit("payname")}
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                <span style={{ color: '#f81d22', fontSize: 12 }}>*</span>{this.props.paytype === 0 ? "付款日期":"收款日期"}:</div></Col>
              <Col span={6}>
                <DatePicker
                  locale={locale}
                  style={{ width: "100%" }}
                  value={this.props.paymentStore.paymentModel.paydate}
                  onChange={value => this.props.paymentStore.paymentModel.setPaydate(value)}
                  disabled={this.fieldedit("paydate")}
                  autoFocus
                />
              </Col>
            </Row>
            {this.props.paytype === 0 && (<Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                <span style={{ color: '#f81d22', fontSize: 12 }}>*</span>户名:</div></Col>
              <Col span={6}>
              <Input
                  value={this.props.paymentStore.paymentModel.accountname}
                  style={{ width: "100%" }}
                  onChange={e =>  this.props.paymentStore.paymentModel.setAccountname(e.target.value)}
                  disabled={this.fieldedit("accountname")}
                  placeholder="账户"
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              账户:</div></Col>
              <Col span={6}>
                <Input
                  value={this.props.paymentStore.paymentModel.accountcode}
                  style={{ width: "100%" }}
                  onChange={e => this.props.paymentStore.paymentModel.setAccountcode(e.target.value) }
                  disabled={this.fieldedit("accountcode")}
                  placeholder="账户"
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
              开户银行:</div></Col>
              <Col span={6}>
                <Input
                  value={this.props.paymentStore.paymentModel.accountbank}
                  style={{ width: "100%" }}
                  onChange={e =>  this.props.paymentStore.paymentModel.setAccountbank(e.target.value)}
                  placeholder="开户银行"
                  disabled={this.fieldedit("accountbank")}
                  autoFocus
                />
              </Col>
            </Row>)}
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                备注:</div></Col>
              <Col span={6}>
                <TextArea
                  value={this.props.paymentStore.paymentModel.message}
                  onChange={e => this.props.paymentStore.paymentModel.setMessage(e.target.value) }
                  disabled={this.fieldedit("message")}
                  placeholder="备注"
                  autoSize={{ minRows: 3, maxRows: 5 }}
                />
              </Col>
            </Row>
          </Panel>
          <Panel header="款项信息" key="2">
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                金额:</div></Col>
              <Col span={6}>
                <Input
                  style={{ width: "100%" }}
                  value={this.props.paymentStore.paymentModel.amount}
                  onChange={e => this.props.paymentStore.paymentModel.setAmount(e.target.value) }
                  placeholder="金额(¥)"
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')"
                  type="number"
                  disabled={this.fieldedit("amount")}
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                其他费用类型:</div></Col>
              <Col span={6}>
                <Input
                  value={this.props.paymentStore.paymentModel.othertype}
                  style={{ width: "100%" }}
                  onChange={e => this.props.paymentStore.paymentModel.setOthertype(e.target.value) }
                  disabled={this.fieldedit("othertype")}
                  placeholder="其他费用类型"
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>
                其他费用:</div></Col>
              <Col span={6}>
                <Input
                  style={{ width: "100%" }}
                  value={this.props.paymentStore.paymentModel.otheramount}
                  onChange={e => this.props.paymentStore.paymentModel.setOtheramount(e.target.value)}
                  placeholder="其他费用(¥)"
                  onkeyup="this.value=this.value.replace(/\D/g,'')"
                  onafterpaste="this.value=this.value.replace(/\D/g,'')"
                  type="number"
                  disabled={this.fieldedit("otheramount")}
                />
              </Col>
            </Row>
            <Row style={{ marginBottom: 5 }}>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>签约时间:</div></Col>
              <Col span={6}>
                <DatePicker
                  locale={locale}
                  style={{ width: "100%" }}
                  disabled={this.fieldedit("signingtime")}
                  value={this.props.paymentStore.paymentModel.signingtime}
                  onChange={value => this.props.paymentStore.paymentModel.setSigningtime(value)}
                  placeholder="签约时间"
                />
              </Col>
              <Col span={2}><div style={{ marginTop: "5px", textAlign: "right", marginRight: "10px" }}>到期时间:</div></Col>
              <Col span={6}>
                <DatePicker
                  locale={locale}
                  style={{ width: "100%" }}
                  disabled={this.fieldedit("expirationtime")}
                  value={this.props.paymentStore.paymentModel.expirationtime}
                  onChange={value => this.props.paymentStore.paymentModel.setExpirationtime(value)}
                  placeholder="到期时间"
                />
              </Col>
            </Row>
          </Panel>
        </Collapse>
      </div >
    );
  };
}
export default inject('paymentStore')(observer(PaymentTable));